<template>
  <div class="enterprise">
    <el-col :span="24" class="action-bar">
		<span style="margin-right:20px">会员企业</span>
		<el-select v-model="searchType" placeholder="请选择">
			<el-option
				v-for="item in searchTypeoptions"
				:key="item.value"
				:label="item.label"
				:value="item.value"
				:disabled="item.disabled"
				>
			</el-option>
		</el-select>
		<el-autocomplete
			style="margin-left:20px;width:300px"
            v-model="searchCompanyName"
			:fetch-suggestions="companyInfoSearch"
			value-key="value"
			popper-class="autocomplete"
			:trigger-on-focus="true"
			@select="handleSelect"
			placeholder="输入企业名称"
            >
			<template slot-scope="scope">
				<div>
					{{scope.item}} 
				</div>
			</template>
        </el-autocomplete>
			<el-button type="primary" size="medium" @click="search" style="margin-left:20px">筛选</el-button>
			<el-button type="primary" size="medium" @click="addCompany">新增</el-button>
    </el-col>

    <!--列表-->
		<el-table :data="companyList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60" sortable>
			</el-table-column>
			<el-table-column prop="img" label="图片" width="150" sortable>
				<template slot-scope="scope">
					<img :src="scope.row.company_thumb" alt="" @click="prevImg(scope.row.company_thumb)" style="height:120px;width:120px;object-fit:contain">
				</template>
			</el-table-column>
			<el-table-column prop="company_name" label="企业名称" width="250" sortable>
			</el-table-column>
			<el-table-column prop="legal_person" label="法定代表人" width="120" sortable>
			</el-table-column>
			<el-table-column prop="industry" label="所属行业" width="150" sortable>
			</el-table-column>
      		<el-table-column prop="contact" label="联系方式" width="150" sortable>
			</el-table-column>
			<el-table-column prop="show" label="是否展示" width="150" sortable>
				<template slot-scope="scope">
					<div>
						<el-switch
							@change="showMini($event,scope)"
							v-model="scope.row.is_show"
							active-text="显示"
							active-value="0"
							inactive-text="关闭">
							</el-switch>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="show" label="创建方式" width="150" sortable>
				<template slot-scope="scope">
					<div>
						<span v-show="scope.row.create_way=='app'">小程序</span>
						<span v-show="scope.row.create_way!=='app'">网页</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="sort" label="是否为会员企业" width="150" sortable>
				<template slot-scope="scope">
					<div v-if="scope.row.is_vip_company==1" style="text-align:center">是</div>
					<div v-else style="text-align:center">否</div>
				</template>
			</el-table-column>
      		<el-table-column prop="sort" label="排序" width="80" sortable>
			</el-table-column>
			<el-table-column label="操作" width="350">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="editorCompany(scope.row.id)" >编辑</el-button>
					<el-button type="danger" class="danger-btn" size="mini" @click="deleteCompany(scope.row.id)">删除</el-button>
					<el-button type="primary" class="danger-btn" size="mini" @click="toCorporate(scope.row.id)">员工列表</el-button>
					<el-button type="Success" size="mini" @click="checkCompany(scope.row.id)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination 
				background
				:page-size="16"
				 layout="prev, pager, next" 
				 :total="totalPage"
				@current-change="pageChange"
				 ></el-pagination>
			</div>
    </el-col>

    <!-- 新增 -->
		<el-dialog :title="addFormTitle" :visible.sync="addFormVisible" width="70%" @close="initData">
			<el-form :model="addForm" label-width="100px">
				<el-form-item label="是否为会员企业" prop="vip" label-width="120px">
					<el-select v-model="addForm.vip" placeholder="请选择" >
						<el-option
							v-for="item in vipOptions"
							:key="item.code"
							:label="item.name"
							:value="item.code"
							>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="图片" prop="img">
					<el-upload
                        class="avatar-uploader"
                        action="https://www.rzkeji.com/api/file/upload-img"
						name="photo"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="companyIcon" :src="companyIcon" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
				</el-form-item>
				<el-form-item label="企业名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off" style="width:500px"></el-input>
				</el-form-item>
				<el-form-item label="法定代表人" prop="office">
					<el-input v-model="addForm.office" auto-complete="off" style="width:500px"></el-input>
				</el-form-item>
				<el-form-item label="所属行业" prop="industry">
					<el-input v-model="addForm.industry" auto-complete="off" style="width:500px"></el-input>
				</el-form-item>
				<el-form-item label="联系方式" prop="phone">
					<el-input v-model="addForm.phone" auto-complete="off" style="width:500px"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="addForm.sortNum" auto-complete="off" type="number" style="width:500px"></el-input>
				</el-form-item>
				<el-form-item label="公司地点" prop="origin">
					<!-- <el-input v-model="addForm.name" auto-complete="off"></el-input> -->
					<el-cascader
							style="width:300px"
							placeholder="选择地址"
							change-on-select
							:options="ORIGIN"
							:props="{value:'label'}"
							v-model="addForm.origin"
							class="cascader"
							filterable></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址">
					<el-input v-model="addForm.addressDetail" auto-complete="off" palceholder="详细地址" style="width:500px"></el-input>
				</el-form-item>
				<el-form-item label="企业标签">
					<el-input v-model="tag" auto-complete="off"  style="width:200px;"></el-input>
					<el-button @click="addTag">添加标签</el-button>
				</el-form-item>
				<el-form-item>
					<div class="tagList" >
						<span class="tag" v-for="(item,index) of tagList" :key="index">
							{{item}}
							<img src="../../../static/images/delete.png" @click="delTag(index)">
						</span>
					</div>
				</el-form-item>
				<el-form-item label="企业简介">
					<el-input
					type="textarea"
					:rows="5"
					:autosize="{minRows:5}"
					placeholder="请输入内容"
					v-model="addForm.intro">
					</el-input>
				</el-form-item>
				<el-form-item label="企业详情">
					<!-- <quill-editor 
						v-model="addForm.info" 
						ref="myQuillEditor" 
						:options="editorOption" 
						@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
						@change="onEditorChange($event)">
					</quill-editor> -->
					<editor v-model="addForm.info" v-if="contentFlag"></editor>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="getCompanyInfoInsert" v-if="!editorFlag">提交</el-button>
				<el-button type="primary" @click="getCompanyInfoUpdate" v-else>提交</el-button>
			</div>
		</el-dialog>

		<!-- 查看详情 -->
		<el-dialog title="查看详情" :visible.sync="detailFormVisible" width="70%" @close="companyDetail=''">
			<el-form :model="addForm" label-width="100px">
				<el-form-item prop="sort" label="是否为会员企业" label-width="150" sortable>
					<div v-if="companyDetail.is_vip_company==1" >是</div>
					<div v-else >否</div>
				</el-form-item>
        		<el-form-item label="图片" prop="img">
					<img :src="companyDetail.company_thumb" alt="" style="height:140px;width:140px;object-fit:contain">
				</el-form-item>
				<el-form-item label="企业名称" prop="name">
					<div>{{companyDetail.company_name}}</div>
				</el-form-item>
				<el-form-item label="法定代表人" prop="office">
					<div>{{companyDetail.legal_person}}</div>
				</el-form-item>
				<el-form-item label="所属行业" prop="level">
					<div>{{companyDetail.industry}}</div>
				</el-form-item>
				<el-form-item label="联系方式" prop="level">
					<div>{{companyDetail.contact}}</div>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<div>{{companyDetail.sort}}</div>
				</el-form-item>
				<el-form-item label="公司地点" prop="level">
					<div>{{companyDetail.province}}{{companyDetail.city}}{{companyDetail.area}}{{companyDetail.company_address}}</div>
				</el-form-item>
				<el-form-item label="企业标签" prop="sort">
					<div class="tag" >
						<span v-for="(item,index) of companyDetail.company_labels" :key="index" style="margin:20px">{{item}}</span>
					</div>
				</el-form-item>
				<el-form-item label="企业介绍">
					{{companyDetail.desc}}
				</el-form-item>
				<el-form-item label="企业详情" v-if="companyDetail.detail">
					<div v-html="companyDetail.detail" class="companyDetail"></div>
				</el-form-item>
				<el-form-item label="企业详情" v-if="companyDetail.img_url_list ||companyDetail.video_url">
					<video :src="companyDetail.video_url" controls style="width:400px;height:300px;display:block;margin-bottom:30px"></video>
					<img :src="item.img_url" alt="" v-for="(item,index) of companyDetail.img_url_list" :key="index" style="max-width:400px">
				</el-form-item>
				
			</el-form>
		</el-dialog>

		<!-- 图片预览 -->
		<el-dialog :visible.sync="prevImgVisible" size="tiny" center width="500px">
			<div style="display:flex;justify-content:center">
				<img style="max-width:100%" :src="dialogImageUrl" alt="">
			</div>
		</el-dialog>
		<!-- 图片预览 end -->
  </div>
</template>

<script>
import ORIGIN from '../../assets/json/origin.json';
import editor from '@/components/editor'

export default {
	components:{
		editor
	},
  data(){
    return{
			prevImgVisible:false,//图片预览的显示
			dialogImageUrl:'',//预览的图片地址
			searchCompanyName:'',//搜索的公司名
			searchCompanyList:'',//搜索到的公司列
			searchType:'',
			searchTypeoptions:[
				{label:'全部',value:''},{label:'是',value:'1'},{label:'否',value:'0'}],
			contentFlag:true,//更新富文本的显示
			editorFlag:false,//判断是编辑还是新增
			ORIGIN,
			addFormVisible: false,//新增界面是否显示
			addFormTitle:'',
			detailFormVisible: false,//详情是否显示
			companyIcon: '',//企业商标
			companyIconId:'',
			companyList:[],
			companyName:'',//搜索的公司名
			tag:'',//标签名
			tagList:[],//标签列
      //新增界面数据
			addForm: {
				vip:'',
				name: '',
				office: '',//法定代表人
				// companyType: '',//所属类型
				industry: '',//行业
				sortNum:'',//排序
				phone:'',
				orgin:['广东省','广州市'],//地址
				addressDetail:'',//详细地址
				intro:'',//企业简介
				info:'',
			},
			//会员级别
			vipOptions:[
				{name:'是',code:1},
				{name:'否',code:0},
			],
			companyDetail:'',//企业的查看详情
			page:1,
			totalPage:0,
			itemId:'',//选中的列表数据的id
    }
  },

  methods:{
	async showMini($event,scope){
		
		let res=await this.$api.changeCompanyShowStatus({id:scope.row.id});
		if(res.data.level=='success'){
						this.getCompanyInfoList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}

	  },
	  prevImg(url){
			this.dialogImageUrl=url;
			this.prevImgVisible=true;
		},
	  	async companyInfoSearch(queryString,cb){
			//搜索企业
			if(queryString==''){
				return
			}
			const res=await  this.$api.companyInfoSearch({
					key_word:queryString
				})
			if(res.data.level=='success'){
				if(res.data.data.length==0){
                    cb([])
                    return
                }
				let data1=res.data.data.map((item)=>{
					return item.company_name
				})
				cb(data1)
			}
			
		},
		handleSelect(e){
			this.searchCompanyName=e
		},
		beforeAvatarUpload(file) {
			//上传照片前的操作
			console.log(file,555)
        },
        handleAvatarSuccess(res, file) {
			//上传照片成功
			if(res.data){
				this.companyIcon=res.data.img_url;
				this.companyIconId=res.data.id;
			}
		},
		prevImg(url){
			this.dialogImageUrl=url;
			this.prevImgVisible=true;
		},
		addTag(){
			//添加标签
			if(this.tag==''){
				return
			}
			this.tagList.push(this.tag)
		},
		delTag(index){
			//删除标签
			this.tagList.splice(index,1)
		},
		onEditorBlur(){
			//富文本失焦
		},
		onEditorFocus(){
			//富文本聚焦
		},
		onEditorChange(){
			//富文本改变
		},

		addCompany(){
			//新增企业信息
			this.addFormTitle='新增';
			this.addFormVisible=true;
			this.editorFlag=false;
		},
		async editorCompany(id){
			//编辑企业信息
			this.addFormTitle='编辑'
			this.editorFlag=true;
			this.addFormVisible=true;
			this.itemId=id;
			const res=await this.$api.getCompanyInfoDetail({
				id
			})
			if(res.data.level=='success'){
				const data=res.data.data.company_info
				this.companyIcon=data.company_thumb;
				this.companyIconId=data.img_id;
				this.addForm.vip=+data.is_vip_company;
				this.addForm.name=data.company_name;
				this.addForm.office=data.legal_person;
				// this.addForm.companyType=data.type;
				this.addForm.industry=data.industry;
				this.addForm.sortNum=data.sort;
				this.addForm.phone=data.contact;
				this.addForm.addressDetail=data.company_address;
				this.addForm.intro=data.desc;
				this.addForm.info=data.detail;
				
				//标签
				this.tagList=data.company_labels
				// this.tagList=data.company_labels.map(item=>{
				// 	return {name:item.name}
				// })

				this.contentFlag=false;
				setTimeout(()=>{
					this.contentFlag=true;
					if(data.province &&data.city&&data.area){
					this.addForm.origin=[data.province,data.city,data.area]
					}else if(data.province &&data.city){
						this.addForm.origin=[data.province,data.city]
					}else if(data.province){
						this.addForm.origin=[data.province]
					}
				this.$forceUpdate();

				},500)

				
			}
		},
		deleteCompany(id){
			//删除企业信息
			const judge= this.$confirm('删除该企业信息?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.getCompanyInfoDelete({id});
					if(res.data.level=='success'){
						this.getCompanyInfoList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
		},
		async checkCompany(id){
			//查看企业详情
			const res=await this.$api.getCompanyInfoDetail({
				id,
			})
			if(res.data.level=='success'){
				this.companyDetail=res.data.data.company_info
			}
			this.detailFormVisible=true;
		},
		toCorporate(companyId){
			//跳转员工列表
			this.$router.push({name:'Corporate',params:{companyId}})
		},
		async getCompanyInfoList(){
			//获取企业列表
			const res=await this.$api.getCompanyInfoList({
				page:this.page,
				pagesSize:16,
				companyName:this.searchCompanyName,
				is_vip_company:this.searchType
			})

			if(res.data.level=='success'){
				this.companyList=res.data.data.company_info_list
				this.totalPage=res.data.data.total
			}
		},
		search(){
			this.page=1;
			this.getCompanyInfoList();
		},
		pageChange(e){
			//翻页
			this.page=e;
			this.getCompanyInfoList()
		},
		async getCompanyInfoInsert(){
			//新增企业
			var province='';
			var city='';
			var area='';
			const msg=this.addForm
			if(msg.origin){
				if(msg.origin.length==3){
					province=msg.origin[0];
					city=msg.origin[1];
					area=msg.origin[2]
				}else if(msg.origin.length==2){
					province=msg.origin[0];
					city=msg.origin[1];
				}else if(msg.origin.length==1){
					province=msg.origin[0];
				}
			}
			const res=await this.$api.getCompanyInfoInsert({
				isVipCompany:msg.vip,
				companyName:msg.name,
				industry:msg.industry,
				imgId:this.companyIconId,
				legalPerson:msg.office,
				// type:msg.companyType,
				contact:msg.phone,
				sort:msg.sortNum,
				province,
				city,
				area,
				labels:this.tagList,
				companyAddress:msg.addressDetail,	
				desc:msg.intro,
				detail:msg.info			
			})
			if(res.data.level=='success'){
				this.$message({
					type:'success',
					message:res.data.message
				})
				this.getCompanyInfoList();
				this.addFormVisible=false
			}else{
				this.$message({
					type:'error',
					message:res.data.message
				})
			}

		},
		async getCompanyInfoUpdate(){
			//更新企业
			var province='';
			var city='';
			var area='';
			var id='';//编辑时当前的id
			const msg=this.addForm
			if(msg.origin){
				if(msg.origin.length==3){
					province=msg.origin[0];
					city=msg.origin[1];
					area=msg.origin[2]
				}else if(msg.origin.length==2){
					province=msg.origin[0];
					city=msg.origin[1];
				}else if(msg.origin.length==1){
					province=msg.origin[0];
				}
			}
				var id=this.itemId;
			const res=await this.$api.getCompanyInfoUpdate({
				isVipCompany:msg.vip,
				companyName:msg.name,
				industry:msg.industry,
				imgId:this.companyIconId,
				legalPerson:msg.office,
				// type:msg.companyType,
				contact:msg.phone,
				sort:msg.sortNum,
				province,
				city,
				area,
				id,
				labels:this.tagList,
				companyAddress:msg.addressDetail,	
				desc:msg.intro,
				detail:msg.info			
			})
			if(res.data.level=='success'){
				this.$message({
					type:'success',
					message:res.data.message
				})
				this.getCompanyInfoList();
				this.addFormVisible=false
			}else{
				this.$message({
					type:'error',
					message:res.data.message
				})
			}

		},
		initData(){
			this.companyIcon='';
			this.companyIconId='';
			this.addForm.vip='';
			this.addForm.name='';
			this.addForm.office='';
			// this.addForm.companyType='';
			this.addForm.industry='';
			this.addForm.sortNum='';
			this.addForm.phone='';
			this.addForm.addressDetail='';
			this.addForm.info='';
			this.addForm.origin=[];
			this.addForm.intro=''
			this.tagList=[];
			
			this.contentFlag=false;
			setTimeout(()=>{
				this.contentFlag=true;
			},500)
		}
		
	},
	mounted() {
		this.getCompanyInfoList()
	},
}
</script>
<style lang='scss' scoped>
  .enterprise{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
		.tagList{
			.tag{
				border:1px solid #eee;
				border-radius: 5px;
				padding:10px 15px;
				position: relative;
				margin:0 20px;
			}
			img{
				width: 30px;
				height: 30px;
				position: absolute;
				right: -15px;
				top:-15px;
			}
		}

		
  }
</style>

<style>
.companyDetail img{
			max-width:100% !important;
		}
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.member .el-dialog__body{overflow: auto;}
</style>